{% extends "base.html" %}

{% block title %}Register - PinCaiCai 2.0{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center">User Registration</h3>
                </div>
                <div class="card-body">
                    <form id="registerForm">
                        <div class="mb-3">
                            <label for="username" class="form-label">Username *</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                            <div class="form-text">Username must be unique, used for login</div>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email">
                            <div class="form-text">Email address for receiving notifications (optional)</div>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password *</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirm_password" class="form-label">Confirm Password *</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        </div>
                        <div class="mb-3">
                            <label for="age" class="form-label">Age</label>
                            <input type="number" class="form-control" id="age" name="age" min="18" max="100">
                            <div class="form-text">Age range: 18-100 years (optional)</div>
                        </div>
                        <div class="mb-3">
                            <label for="gender" class="form-label">Gender</label>
                            <select class="form-select" id="gender" name="gender">
                                <option value="">Please select gender</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select>
                            <div class="form-text">Gender information (optional)</div>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-success">Register</button>
                        </div>
                    </form>
                    <div class="text-center mt-3">
                        <p>Already have an account? <a href="/login">Login Now</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const age = document.getElementById('age').value;
    const gender = document.getElementById('gender').value;
    
    // Validate password
    if (password !== confirmPassword) {
        alert('Passwords do not match');
        return;
    }
    
    // Validate age
    if (age && (age < 18 || age > 100)) {
        alert('Age must be between 18-100 years');
        return;
    }
    
    const formData = new FormData(this);
    const data = {
        username: formData.get('username'),
        email: formData.get('email') || null,
        password: formData.get('password'),
        age: age ? parseInt(age) : null,
        gender: gender || null
    };
    
    // Remove empty values
    Object.keys(data).forEach(key => {
        if (data[key] === null || data[key] === '') {
            delete data[key];
        }
    });
    
    fetch('/api/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.message === 'Registration successful') {
            alert('Registration successful! Please login');
            window.location.href = '/login';
        } else {
            alert('Registration failed: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Registration failed, please try again');
    });
});
</script>
{% endblock %}
